<template>
  <a-modal
    v-model:visible="showComputed"
    width="888px"
    title="Delete"
    wrap-class-name="primary-modal"
    ok-text="Delete"
    :ok-button-props="{ disabled: !buttonAvailable }"
    :destroy-on-close="true"
    @cancel="showComputed = false"
    @ok="handleRemoveFromBlacklist"
  >
    <a-form ref="removeFormRef" layout="vertical" :rules="removeFormRules" :model="removeForm">
      <a-row>
        <a-col :span="24">
          <a-form-item label="Reason" name="reason">
            <a-textarea v-model:value="removeForm.reason" :auto-size="{ minRows: 4, maxRows: 4 }" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script setup>
import { computed, watch, inject, reactive, ref } from 'vue'
import Blacklist from '@/api/blacklist.js'
import { OPERATION_SUCCESSFUL } from '@/constants/message.js'
const { message } = inject('Feedback')
const props = defineProps({
  show: Boolean,
  clientId: [Number, String]
})
const emits = defineEmits(['update:show', 'updated'])
const showComputed = computed({
  get: () => props.show,
  set: val => emits('update:show', val)
})
// Remove
const removeForm = reactive({
  reason: ''
})
const removeFormRef = ref(null)
const removeFormRules = {
  reason: [
    {
      required: true,
      whitespace: true,
      message: 'Please Input Reason',
      trigger: 'change'
    }
  ]
}
const buttonAvailable = ref(true)
const handleRemoveFromBlacklist = () => {
  removeFormRef.value.validate().then(() => {
    buttonAvailable.value = false
    Blacklist.remove(props.clientId, removeForm.reason)
      .then(() => {
        message.success(OPERATION_SUCCESSFUL)
        emits('updated')
      })
      .finally(() => {
        showComputed.value = false
        buttonAvailable.value = true
      })
  })
}
watch(
  () => showComputed.value,
  value => {
    if (value) removeForm.reason = ''
  }
)
</script>

<style scoped></style>
